<template>
  <div class="module">
    <div class="header font26 flex-inline-between-center">
      <span>{{title}}</span>
      <i class="iconfont icon-xiayibu"></i>
    </div>
    <div class="content flex-inline-between-center">
      <div v-for="item in imgList" :key="item.id">
        <img :src="item.url"/>
        <p class="font-666">{{item.name}}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class TopSearch extends Vue {
  private title: string = '食无忧推荐';
  private imgList: any[] = [
    {
      id: '1',
      name: '茅台',
      url: 'https://timgsa.baidu.com/timg?image&quality=' +
      '80&size=b9999_10000&sec=1548226502168&di=' +
      '66d4089719bf663e64e51671d3a47d6e&imgtype=0&' +
      'src=http%3A%2F%2Fimg.chemcp.com%2F201811%2F1630022018111118401220578.jpg',
    },
    {
      id: '2',
      name: '茅台',
      url: 'https://timgsa.baidu.com/timg?image&quality=' +
      '80&size=b9999_10000&sec=1548226502168&di=' +
      '66d4089719bf663e64e51671d3a47d6e&imgtype=0&' +
      'src=http%3A%2F%2Fimg.chemcp.com%2F201811%2F1630022018111118401220578.jpg',
    },
    {
      id: '3',
      name: '茅台',
      url: 'https://timgsa.baidu.com/timg?image&quality=' +
      '80&size=b9999_10000&sec=1548226502168&di=' +
      '66d4089719bf663e64e51671d3a47d6e&imgtype=0&' +
      'src=http%3A%2F%2Fimg.chemcp.com%2F201811%2F1630022018111118401220578.jpg',
    },
    {
      id: '4',
      name: '茅台',
      url: 'https://timgsa.baidu.com/timg?image&quality=' +
      '80&size=b9999_10000&sec=1548226502168&di=' +
      '66d4089719bf663e64e51671d3a47d6e&imgtype=0&' +
      'src=http%3A%2F%2Fimg.chemcp.com%2F201811%2F1630022018111118401220578.jpg',
    },
    {
      id: '5',
      name: '茅台',
      url: 'https://timgsa.baidu.com/timg?image&quality=' +
      '80&size=b9999_10000&sec=1548226502168&di=' +
      '66d4089719bf663e64e51671d3a47d6e&imgtype=0&' +
      'src=http%3A%2F%2Fimg.chemcp.com%2F201811%2F1630022018111118401220578.jpg',
    },
    {
      id: '6',
      name: '茅台',
      url: 'https://timgsa.baidu.com/timg?image&quality=' +
      '80&size=b9999_10000&sec=1548226502168&di=' +
      '66d4089719bf663e64e51671d3a47d6e&imgtype=0&' +
      'src=http%3A%2F%2Fimg.chemcp.com%2F201811%2F1630022018111118401220578.jpg',
    },
    {
      id: '7',
      name: '茅台',
      url: 'https://timgsa.baidu.com/timg?image&quality=' +
      '80&size=b9999_10000&sec=1548226502168&di=' +
      '66d4089719bf663e64e51671d3a47d6e&imgtype=0&' +
      'src=http%3A%2F%2Fimg.chemcp.com%2F201811%2F1630022018111118401220578.jpg',
    },
  ];
}
</script>

<style lang="scss" scoped>
.module {
  .header {
    width: 100%;
    height: 85px;
    line-height: 85px;
  }
  .content {
    flex-wrap: wrap;
    background: #fff;
    padding: 32px 46px;
    & > div {
      width: 30%;
      margin-bottom: 38px;
      img {
        width: 120px;
        height: 120px;
      }
      p {
        width: 120px;
        margin: 0 auto;
        font-size: 24px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
    }
    & > div:last-of-type {
      margin-bottom: 0;
    }
  }
}
</style>
